<div id="page-body">
  <meta http-equiv="refresh" content="0; URL=https://getdatepicker.com/6/repl.html">
  <link rel="canonical" href="https://getdatepicker.com/6/repl.html">

  All the examples have been migrated to the REPL page!

  Redirecting to <a href="https://getdatepicker.com/6/repl.html">https://getdatepicker.com/6/repl.html</a>
<!--  <div class='row'>-->
<!--    <p>-->
<!--      Version 6 removes the need for an input field, Bootstrap, jQuery and MomemntJs.-->
<!--      Each example comes code section that can be toggled by clicking on <i class='fa-solid fa-code'-->
<!--                                                                            aria-hidden='true'></i>.-->
<!--    </p>-->
<!--    <p>-->
<!--      If you still need jQuery, check out the <a href='jquery.html'>jQuery examples</a>.-->
<!--    </p>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='minimum-setup'>Minimum Setup <a class='anchor-link ' aria-label='Anchor' href='#minimum-setup'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      All you need is an element to attach the picker to.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='icon-onlyHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#icon-onlyHtml' type='button'-->
<!--                  role='tab' aria-controls='icon-onlyHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='icon-onlyJs-tab' data-bs-toggle='tab' data-bs-target='#icon-onlyJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='icon-onlyJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='icon-onlyLog-tab' data-bs-toggle='tab' data-bs-target='#icon-onlyLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='icon-onlyLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='icon-onlyHtml' role='tabpanel'-->
<!--             aria-labelledby='icon-onlyHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;span-->
<!--   id='icon-only'-->
<!--   class='log-event'-->
<!--   style='display: inline-block'-->
<!-- &gt;-->
<!--   &lt;i class='fa-solid fa-calendar fa-9x'&gt;&lt;/i&gt;-->
<!-- &lt;/span&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='icon-onlyJs' role='tabpanel' aria-labelledby='icon-onlyJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('icon-only'));-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='icon-onlyLog' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker1Log-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--           <span-->
<!--             id='icon-only'-->
<!--             class='log-event'-->
<!--             style='display: inline-block'-->
<!--           >-->
<!--             <i class='fa-solid fa-calendar fa-6x' aria-hidden='true'></i>-->
<!--           </span>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      new tempusDominus.TempusDominus(document.getElementById('icon-only'));-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='simple-setup'>Simple Setup-->
<!--      <a class='anchor-link ' aria-label='Anchor' href='#simple-setup'>-->
<!--        <i class='fa-solid fa-anchor' aria-hidden='true'></i></a>-->
<!--      <small class='show-code' title='View Code'><i class='fa-solid fa-code' aria-hidden='true'></i></small>-->

<!--      <a aria-label='stackblitz' href='https://stackblitz.com/edit/tempus-dominus-v6-simple-setup'-->
<!--         title='Stackblitz example'>-->
<!--        <i class='fa-solid fa-bolt' aria-hidden='true'></i></a>-->
<!--    </h3>-->

<!--    <p>-->
<!--      This is the simplest setup you can have with Bootstrap and Font Awesome 5. The picker defaults to FA 5 Solid-->
<!--      icons, however you can overwrite the defaults globally.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='datetimepicker1Html-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker1Html' type='button'-->
<!--                  role='tab' aria-controls='datetimepicker1Html' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='datetimepicker1Js-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker1Js'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='datetimepicker1Js' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='datetimepicker1Log-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker1Log'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='datetimepicker1Log' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='datetimepicker1Html' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker1Html-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='datetimepicker1'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='datetimepicker1Input'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#datetimepicker1'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#datetimepicker1'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='datetimepicker1Js' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker1Js-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='datetimepicker1Log' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker1Log-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='datetimepicker1Input' class='form-label'>Simple picker</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='datetimepicker1'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='datetimepicker1Input'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#datetimepicker1'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#datetimepicker1'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='side-by-side'>Side-by-Side-->
<!--      <a class='anchor-link ' aria-label='Anchor' href='#side-by-side'>-->
<!--        <i class='fa-solid fa-anchor' aria-hidden='true'></i></a>-->
<!--      <small class='show-code' title='View Code'><i class='fa-solid fa-code' aria-hidden='true'></i></small>-->
<!--    </h3>-->

<!--    <p>-->
<!--      This demonstrates the side-by-side option.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='pickerSideBySideHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#pickerSideBySideHtml' type='button'-->
<!--                  role='tab' aria-controls='pickerSideBySideHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='pickerSideBySideJs-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#pickerSideBySideJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='pickerSideBySideJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='pickerSideBySideLog-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#pickerSideBySideLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='pickerSideBySideLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='pickerSideBySideHtml' role='tabpanel'-->
<!--             aria-labelledby='pickerSideBySideHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='pickerSideBySide'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='pickerSideBySideInput'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#pickerSideBySide'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#pickerSideBySide'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='pickerSideBySideJs' role='tabpanel'-->
<!--             aria-labelledby='pickerSideBySideJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('pickerSideBySide', {-->
<!--    display: {-->
<!--        sideBySide: true-->
<!--    }-->
<!-- }));-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='pickerSideBySideLog' role='tabpanel'-->
<!--             aria-labelledby='pickerSideBySideLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='pickerSideBySideInput' class='form-label'>Side-by-Side picker</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='pickerSideBySide'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='pickerSideBySideInput'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#pickerSideBySide'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#pickerSideBySide'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      const pickerSideBySide = new tempusDominus.TempusDominus(document.getElementById('pickerSideBySide'), {-->
<!--        display: {-->
<!--          sideBySide: true-->
<!--        }-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='locales'>Using Locales <a class='anchor-link ' aria-label='Anchor' href='#locales'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      You can provide localization options to override the tooltips as well as the day/month display.-->
<!--    </p>-->
<!--    <p>-->
<!--      You could also set this globally via <code>tempusDominus.DefaultOptions.localization = { ... }</code> or by-->
<!--      creating a variable e.g. <code>const ru = { today:'Перейти сегодня' ... };</code> then provide the options-->
<!--      as-->
<!--    </p>-->
<!--    <pre>-->
<!--         <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('datetimepicker2'), {-->
<!--   localization: ru-->
<!-- }-->
<!--         </code>-->
<!--     </pre>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='datetimepicker2Html-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker2Html' type='button'-->
<!--                  role='tab' aria-controls='datetimepicker2Html' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='datetimepicker2Js-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker2Js'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='datetimepicker2Js' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='datetimepicker2Log-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker2Log'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='datetimepicker2Log' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='datetimepicker2Html' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker2Html-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;label for='datetimepicker2Input' class='form-label'&gt;Russian locale&lt;/label&gt;-->
<!-- &lt;div-->
<!--   class='input-group log-event'-->
<!--   id='datetimepicker2'-->
<!--   data-td-target-input='nearest'-->
<!--   data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='datetimepicker2Input'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#datetimepicker2'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#datetimepicker2'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='datetimepicker2Js' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker2Js-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('datetimepicker2'), {-->
<!--     localization: {-->
<!--        today: 'Перейти сегодня',-->
<!--        clear: 'Очистить выделение',-->
<!--        close: 'Закрыть сборщик',-->
<!--        selectMonth: 'Выбрать месяц',-->
<!--        previousMonth: 'Предыдущий месяц',-->
<!--        nextMonth: 'В следующем месяце',-->
<!--        selectYear: 'Выбрать год',-->
<!--        previousYear: 'Предыдущий год',-->
<!--        nextYear: 'В следующем году',-->
<!--        selectDecade: 'Выбрать десятилетие',-->
<!--        previousDecade: 'Предыдущее десятилетие',-->
<!--        nextDecade: 'Следующее десятилетие',-->
<!--        previousCentury: 'Предыдущий век',-->
<!--        nextCentury: 'Следующий век',-->
<!--        pickHour: 'Выберите час',-->
<!--        incrementHour: 'Время увеличения',-->
<!--        decrementHour: 'Уменьшить час',-->
<!--        pickMinute: 'Выбрать минуту',-->
<!--        incrementMinute: 'Минута приращения',-->
<!--        decrementMinute: 'Уменьшить минуту',-->
<!--        pickSecond: 'Выбрать второй',-->
<!--        incrementSecond: 'Увеличение секунды',-->
<!--        decrementSecond: 'Уменьшение секунды',-->
<!--        toggleMeridiem: 'Переключить период',-->
<!--        selectTime: 'Выбрать время',-->
<!--        selectDate: 'Выбрать дату',-->
<!--        dayViewHeaderFormat: { month: 'long', year: '2-digit' },-->
<!--        locale: 'ru',-->
<!--        startOfTheWeek: 1-->
<!--     }-->
<!-- });-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='datetimepicker2Log' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker2Log-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='datetimepicker2Input' class='form-label'>Russian locale</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='datetimepicker2'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='datetimepicker2Input'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#datetimepicker2'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#datetimepicker2'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      new tempusDominus.TempusDominus(document.getElementById('datetimepicker2'), {-->
<!--        localization: {-->
<!--          today: 'Перейти сегодня',-->
<!--          clear: 'Очистить выделение',-->
<!--          close: 'Закрыть сборщик',-->
<!--          selectMonth: 'Выбрать месяц',-->
<!--          previousMonth: 'Предыдущий месяц',-->
<!--          nextMonth: 'В следующем месяце',-->
<!--          selectYear: 'Выбрать год',-->
<!--          previousYear: 'Предыдущий год',-->
<!--          nextYear: 'В следующем году',-->
<!--          selectDecade: 'Выбрать десятилетие',-->
<!--          previousDecade: 'Предыдущее десятилетие',-->
<!--          nextDecade: 'Следующее десятилетие',-->
<!--          previousCentury: 'Предыдущий век',-->
<!--          nextCentury: 'Следующий век',-->
<!--          pickHour: 'Выберите час',-->
<!--          incrementHour: 'Время увеличения',-->
<!--          decrementHour: 'Уменьшить час',-->
<!--          pickMinute: 'Выбрать минуту',-->
<!--          incrementMinute: 'Минута приращения',-->
<!--          decrementMinute: 'Уменьшить минуту',-->
<!--          pickSecond: 'Выбрать второй',-->
<!--          incrementSecond: 'Увеличение секунды',-->
<!--          decrementSecond: 'Уменьшение секунды',-->
<!--          toggleMeridiem: 'Переключить период',-->
<!--          selectTime: 'Выбрать время',-->
<!--          selectDate: 'Выбрать дату',-->
<!--          dayViewHeaderFormat: { month: 'long', year: '2-digit' },-->
<!--          locale: 'ru',-->
<!--          startOfTheWeek: 1-->
<!--        }-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='time-only'>Time Only <a class='anchor-link ' aria-label='Anchor' href='#time-only'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      Version 6 no longer uses MomentJs so selecting the what to display is now done via the-->
<!--      <code>display.components</code>.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='datetimepicker3Html-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker3Html' type='button'-->
<!--                  role='tab' aria-controls='datetimepicker3Html' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='datetimepicker3Js-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker3Js'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='datetimepicker3Js' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='datetimepicker3Log-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker3Log'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='datetimepicker3Log' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='datetimepicker3Html' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker3Html-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='datetimepicker3'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='datetimepicker3Input'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#datetimepicker3'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#datetimepicker3'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-clock'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='datetimepicker3Js' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker3Js-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('datetimepicker3'), {-->
<!--   display: {-->
<!--     viewMode: 'clock',-->
<!--     components: {-->
<!--       decades: false,-->
<!--       year: false,-->
<!--       month: false,-->
<!--       date: false,-->
<!--       hours: true,-->
<!--       minutes: true,-->
<!--       seconds: false-->
<!--     }-->
<!--   }-->
<!-- });-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='datetimepicker3Log' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker3Log-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='datetimepicker3Input' class='form-label'>Time</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='datetimepicker3'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='datetimepicker3Input'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#datetimepicker3'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#datetimepicker3'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-clock'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      new tempusDominus.TempusDominus(document.getElementById('datetimepicker3'), {-->
<!--        display: {-->
<!--          viewMode: 'clock',-->
<!--          components: {-->
<!--            decades: false,-->
<!--            year: false,-->
<!--            month: false,-->
<!--            date: false,-->
<!--            hours: true,-->
<!--            minutes: true,-->
<!--            seconds: false-->
<!--          }-->
<!--        }-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='date-only'>Date Only <a class='anchor-link ' aria-label='Anchor' href='#date-only'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      Version 6 no longer uses MomentJs so selecting what to display is now done via the-->
<!--      <code>display.components</code>.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='datetimepicker4Html-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker4Html' type='button'-->
<!--                  role='tab' aria-controls='datetimepicker4Html' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='datetimepicker4Js-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker4Js'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='datetimepicker4Js' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='datetimepicker4Log-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker4Log'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='datetimepicker4Log' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='datetimepicker4Html' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker4Html-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='datetimepicker4'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='datetimepicker4Input'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#datetimepicker4'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#datetimepicker4'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='datetimepicker4Js' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker4Js-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('datetimepicker4'), {-->
<!--   display: {-->
<!--     viewMode: 'clock',-->
<!--     components: {-->
<!--       decades: true,-->
<!--       year: true,-->
<!--       month: true,-->
<!--       date: true,-->
<!--       hours: false,-->
<!--       minutes: false,-->
<!--       seconds: false,-->
<!--     }-->
<!--   }-->
<!-- });-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='datetimepicker4Log' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker4Log-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='datetimepicker4Input' class='form-label'>Date</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='datetimepicker4'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='datetimepicker4Input'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#datetimepicker4'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#datetimepicker4'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      new tempusDominus.TempusDominus(document.getElementById('datetimepicker4'), {-->
<!--        display: {-->
<!--          components: {-->
<!--            date: true,-->
<!--            decades: true,-->
<!--            month: true,-->
<!--            year: true,-->
<!--            hours: false,-->
<!--            seconds: false,-->
<!--            minutes: false-->
<!--          }-->
<!--        }-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='input-only'>Input Only <a class='anchor-link ' aria-label='Anchor' href='#simple-setup'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      An input group and icon are not required for the picker to function, you can also simply use an input field.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='datetimepicker5Html-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker5Html' type='button'-->
<!--                  role='tab' aria-controls='datetimepicker5Html' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='datetimepicker5Js-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker5Js'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='datetimepicker5Js' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='datetimepicker5Log-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#datetimepicker5Log'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='datetimepicker5Log' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='datetimepicker5Html' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker5Html-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='datetimepicker5'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='datetimepicker5Input'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#datetimepicker5'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#datetimepicker5'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='datetimepicker5Js' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker5Js-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('datetimepicker5'));-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='datetimepicker5Log' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker5Log-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='datetimepicker5' class='form-label'>No icon</label>-->
<!--          <input-->
<!--            id='datetimepicker5'-->
<!--            type='text'-->
<!--            class='form-control'-->
<!--          />-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      new tempusDominus.TempusDominus(document.getElementById('datetimepicker5'), {});-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='enabledDisabled-dates'>Enabled/Disabled Dates <a class='anchor-link ' aria-label='Anchor'-->
<!--                                                             href='#simple-setup'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      You can provide an array of dates to enable or dates to disable.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='enabledDisabledHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#enabledDisabledHtml' type='button'-->
<!--                  role='tab' aria-controls='enabledDisabledHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='enabledDisabledJs-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#enabledDisabledJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='enabledDisabledJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='enabledDisabledLog-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#enabledDisabledLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='enabledDisabledLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='enabledDisabledHtml' role='tabpanel'-->
<!--             aria-labelledby='enabledDisabledHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='enabledDisabled'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='enabledDisabledInput'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#enabledDisabled'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#enabledDisabled'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='enabledDisabledJs' role='tabpanel'-->
<!--             aria-labelledby='enabledDisabledJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- const tomorrow = new Date();-->
<!-- tomorrow.setDate(tomorrow.getDate()+1);-->
<!-- new tempusDominus.TempusDominus(document.getElementById('enabledDisabled'), {-->
<!--   restrictions: {-->
<!--     disabledDates: [-->
<!--       tomorrow,-->
<!--       new tempusDominus.DateTime().manipulate(2, 'date')-->
<!--     ]-->
<!--   }-->
<!-- });-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='enabledDisabledLog' role='tabpanel'-->
<!--             aria-labelledby='enabledDisabledLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='enabledDisabledInput' class='form-label'>Next two days are disabled</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='enabledDisabled'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='enabledDisabledInput'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#enabledDisabled'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#enabledDisabled'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      const tomorrow = new Date();-->
<!--      tomorrow.setDate(tomorrow.getDate() + 1);-->
<!--      new tempusDominus.TempusDominus(document.getElementById('enabledDisabled'), {-->
<!--        restrictions: {-->
<!--          disabledDates: [-->
<!--            tomorrow,-->
<!--            new tempusDominus.DateTime().manipulate(2, 'date')-->
<!--          ]-->
<!--        }-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='linked-pickers'>Linked pickers <a class='anchor-link ' aria-label='Anchor' href='#linked-pickers'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      You can use event listeners or the subscribe method to link two pickers together. For example, a hotel stay-->
<!--      booking.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='linkedPickersHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#linkedPickersHtml' type='button'-->
<!--                  role='tab' aria-controls='linkedPickersHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='linkedPickersJs-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#linkedPickersJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='linkedPickersJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='linkedPickersLog-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#linkedPickersLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='linkedPickersLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='linkedPickersHtml' role='tabpanel'-->
<!--             aria-labelledby='linkedPickersHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!--&lt;div class=&#39;row&#39;&gt;-->
<!--	&lt;div class=&#39;col-sm-6&#39;&gt;-->
<!--	  &lt;label for=&#39;linkedPickers1Input&#39; class=&#39;form-label&#39;&gt;From&lt;/label&gt;-->
<!--	  &lt;div-->
<!--		class=&#39;input-group log-event&#39;-->
<!--		id=&#39;linkedPickers1&#39;-->
<!--		data-td-target-input=&#39;nearest&#39;-->
<!--		data-td-target-toggle=&#39;nearest&#39;-->
<!--	  &gt;-->
<!--		&lt;input-->
<!--		  id=&#39;linkedPickers1Input&#39;-->
<!--		  type=&#39;text&#39;-->
<!--		  class=&#39;form-control&#39;-->
<!--		  data-td-target=&#39;#linkedPickers1&#39;-->
<!--		/&gt;-->
<!--		&lt;span-->
<!--		  class=&#39;input-group-text&#39;-->
<!--		  data-td-target=&#39;#linkedPickers1&#39;-->
<!--		  data-td-toggle=&#39;datetimepicker&#39;-->
<!--		&gt;-->
<!--		   &lt;span class=&#39;fa-solid fa-calendar&#39;&gt;&lt;/span&gt;-->
<!--		 &lt;/span&gt;-->
<!--	  &lt;/div&gt;-->
<!--	&lt;/div&gt;-->
<!--	&lt;div class=&#39;col-sm-6&#39;&gt;-->
<!--	  &lt;label for=&#39;linkedPickers2Input&#39; class=&#39;form-label&#39;&gt;To&lt;/label&gt;-->
<!--	  &lt;div-->
<!--		class=&#39;input-group log-event&#39;-->
<!--		id=&#39;linkedPickers2&#39;-->
<!--		data-td-target-input=&#39;nearest&#39;-->
<!--		data-td-target-toggle=&#39;nearest&#39;-->
<!--	  &gt;-->
<!--		&lt;input-->
<!--		  id=&#39;linkedPickers2Input&#39;-->
<!--		  type=&#39;text&#39;-->
<!--		  class=&#39;form-control&#39;-->
<!--		  data-td-target=&#39;#linkedPickers2&#39;-->
<!--		/&gt;-->
<!--		&lt;span-->
<!--		  class=&#39;input-group-text&#39;-->
<!--		  data-td-target=&#39;#linkedPickers2&#39;-->
<!--		  data-td-toggle=&#39;datetimepicker&#39;-->
<!--		&gt;-->
<!--		   &lt;span class=&#39;fa-solid fa-calendar&#39;&gt;&lt;/span&gt;-->
<!--		 &lt;/span&gt;-->
<!--	  &lt;/div&gt;-->
<!--	&lt;/div&gt;-->
<!--&lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='linkedPickersJs' role='tabpanel' aria-labelledby='linkedPickersJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!--const linkedPicker1Element = document.getElementById('linkedPickers1');-->
<!--const linked1 = new tempusDominus.TempusDominus(linkedPicker1Element);-->
<!--const linked2 = new tempusDominus.TempusDominus(document.getElementById('linkedPickers2'), {-->
<!--  useCurrent: false-->
<!--});-->

<!--//using event listeners-->
<!--linkedPicker1Element.addEventListener(tempusDominus.Namespace.events.change, (e) => {-->
<!--  linked2.updateOptions({-->
<!--    restrictions: {-->
<!--      minDate: e.detail.date-->
<!--    }-->
<!--  });-->
<!--});-->

<!--//using subscribe method-->
<!--const subscription = linked2.subscribe(tempusDominus.Namespace.events.change, (e) => {-->
<!--  linked1.updateOptions({-->
<!--    restrictions: {-->
<!--      maxDate: e.date-->
<!--    }-->
<!--  });-->
<!--});-->

<!--// event listener can be unsubscribed to:-->
<!--// subscription.unsubscribe();-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='linkedPickersLog' role='tabpanel'-->
<!--             aria-labelledby='linkedPickersLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='linkedPickers1Input' class='form-label'>From</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='linkedPickers1'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='linkedPickers1Input'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#linkedPickers1'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#linkedPickers1'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='linkedPickers2Input' class='form-label'>To</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='linkedPickers2'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='linkedPickers2Input'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#linkedPickers2'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#linkedPickers2'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      const linkedPicker1Element = document.getElementById('linkedPickers1');-->
<!--      const linked1 = new tempusDominus.TempusDominus(linkedPicker1Element);-->
<!--      const linked2 = new tempusDominus.TempusDominus(document.getElementById('linkedPickers2'), {-->
<!--        useCurrent: false-->
<!--      });-->

<!--      //using event listeners-->
<!--      linkedPicker1Element.addEventListener(tempusDominus.Namespace.events.change, (e) => {-->
<!--        linked2.updateOptions({-->
<!--          restrictions: {-->
<!--            minDate: e.detail.date-->
<!--          }-->
<!--        });-->
<!--      });-->

<!--      //using subscribe method-->
<!--      const subscription = linked2.subscribe(tempusDominus.Namespace.events.change, (e) => {-->
<!--        linked1.updateOptions({-->
<!--          restrictions: {-->
<!--            maxDate: e.date-->
<!--          }-->
<!--        });-->
<!--      });-->

<!--      // event listener can be unsubscribed to:-->
<!--      // subscription.unsubscribe();-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='custom-icons'>Custom Icons <a class='anchor-link ' aria-label='Anchor' href='#custom-icons'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      You can change the icons from the Font Awesome default to another icon-->
<!--      set like <a href='https://icons.getbootstrap.com/' target='_blank' rel='noopener'>Bootstrap's Icon</a>-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='customIconsHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#customIconsHtml' type='button'-->
<!--                  role='tab' aria-controls='customIconsHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='customIconsJs-tab' data-bs-toggle='tab' data-bs-target='#customIconsJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='customIconsJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='customIconsLog-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#customIconsLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='customIconsLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='customIconsHtml' role='tabpanel'-->
<!--             aria-labelledby='customIconsHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='customIcons'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='customIconsInput'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#customIcons'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#customIcons'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='bi bi-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='customIconsJs' role='tabpanel' aria-labelledby='customIconsJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('customIcons'), {-->
<!--   display: {-->
<!--     icons: {-->
<!--       time: 'bi bi-clock',-->
<!--       date: 'bi bi-calendar',-->
<!--       up: 'bi bi-arrow-up',-->
<!--       down: 'bi bi-arrow-down',-->
<!--       previous: 'bi bi-chevron-left',-->
<!--       next: 'bi bi-chevron-right',-->
<!--       today: 'bi bi-calendar-check',-->
<!--       clear: 'bi bi-trash',-->
<!--       close: 'bi bi-x',-->
<!--     },-->
<!--     buttons: {-->
<!--       today: true,-->
<!--       clear: true,-->
<!--       close: true,-->
<!--     },-->
<!--   }-->
<!-- });-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='customIconsLog' role='tabpanel'-->
<!--             aria-labelledby='customIconsLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='customIconsInput' class='form-label'>Bootstrap Icons</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='customIcons'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='customIconsInput'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#customIcons'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#customIcons'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='bi bi-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      new tempusDominus.TempusDominus(document.getElementById('customIcons'), {-->
<!--        display: {-->
<!--          icons: {-->
<!--            time: 'bi bi-clock',-->
<!--            date: 'bi bi-calendar',-->
<!--            up: 'bi bi-arrow-up',-->
<!--            down: 'bi bi-arrow-down',-->
<!--            previous: 'bi bi-chevron-left',-->
<!--            next: 'bi bi-chevron-right',-->
<!--            today: 'bi bi-calendar-check',-->
<!--            clear: 'bi bi-trash',-->
<!--            close: 'bi bi-x'-->
<!--          },-->
<!--          buttons: {-->
<!--            today: true,-->
<!--            clear: true,-->
<!--            close: true-->
<!--          }-->
<!--        }-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='view-mode'>View Mode <a class='anchor-link ' aria-label='Anchor' href='#view-mode'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      The view mode options allows you to show a different initial view. For example selecting a date of birth.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='viewModeHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#viewModeHtml' type='button'-->
<!--                  role='tab' aria-controls='viewModeHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='viewModeJs-tab' data-bs-toggle='tab' data-bs-target='#viewModeJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='viewModeJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='viewModeLog-tab' data-bs-toggle='tab' data-bs-target='#viewModeLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='viewModeLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='viewModeHtml' role='tabpanel'-->
<!--             aria-labelledby='viewModeHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='viewMode'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='viewModeInput'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#viewMode'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#viewMode'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='viewModeJs' role='tabpanel' aria-labelledby='viewModeJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('viewMode'), {-->
<!--   display: {-->
<!--     viewMode: 'years'-->
<!--   }-->
<!-- });-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='viewModeLog' role='tabpanel'-->
<!--             aria-labelledby='viewModeLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='viewModeInput' class='form-label'>Birth Date</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='viewMode'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='viewModeInput'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#viewMode'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#viewMode'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      new tempusDominus.TempusDominus(document.getElementById('viewMode'), {-->
<!--        display: {-->
<!--          viewMode: 'years'-->
<!--        }-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='min-view-mode'>Minimum View <a class='anchor-link ' aria-label='Anchor' href='#min-view-mode'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      You can set the minimum view mode by turning off lower level components. If you only want your user to-->
<!--      select-->
<!--      month and year, <code>display.components.date: false</code>. The <code>display.components</code> object also-->
<!--      provides convenience shortcuts. For instance if you don't want any of the time picker components to be-->
<!--      available-->
<!--      simple set <code>display.components.clock: false</code>. Do be aware that-->
<!--      <code>display.components.clock</code>-->
<!--      must be true (default) in order to display the time components regardless of <code>display.components.hours|minutes|seconds</code>-->
<!--      is true. The same applies for <code>display.components.calendar</code>-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='minViewModeHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#minViewModeHtml' type='button'-->
<!--                  role='tab' aria-controls='minViewModeHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='minViewModeJs-tab' data-bs-toggle='tab' data-bs-target='#minViewModeJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='minViewModeJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='minViewModeLog-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#minViewModeLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='minViewModeLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='minViewModeHtml' role='tabpanel'-->
<!--             aria-labelledby='minViewModeHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='minViewMode'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='minViewModeInput'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#minViewMode'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#minViewMode'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='minViewModeJs' role='tabpanel' aria-labelledby='minViewModeJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('minViewMode'), {-->
<!--   display: {-->
<!--     components: {-->
<!--       clock:false,-->
<!--       date: false,-->
<!--     }-->
<!--   }-->
<!-- });-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='minViewModeLog' role='tabpanel'-->
<!--             aria-labelledby='minViewModeLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='minViewModeInput' class='form-label'>Month/Year</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='minViewMode'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='minViewModeInput'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#minViewMode'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#minViewMode'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      new tempusDominus.TempusDominus(document.getElementById('minViewMode'), {-->
<!--        display: {-->
<!--          components: {-->
<!--            clock: false,-->
<!--            date: false-->
<!--          }-->
<!--        }-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='disabled-days-of-the-week'>Disabled Days of the Week <a class='anchor-link ' aria-label='Anchor'-->
<!--                                                                    href='#disabled-days-of-the-week'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      This is the simplest setup you can have with Bootstrap and Font Awesome 5. The picker defaults to FA 5 Solid-->
<!--      icons, however you can overwrite the defaults globally.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='disabledDowHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#disabledDowHtml' type='button'-->
<!--                  role='tab' aria-controls='disabledDowHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='disabledDowJs-tab' data-bs-toggle='tab' data-bs-target='#disabledDowJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='disabledDowJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='disabledDowLog-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#disabledDowLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='disabledDowLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='disabledDowHtml' role='tabpanel'-->
<!--             aria-labelledby='disabledDowHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='disabledDow'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='disabledDowInput'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#disabledDow'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#disabledDow'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='disabledDowJs' role='tabpanel' aria-labelledby='disabledDowJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('disabledDow'), {-->
<!--   restrictions: {-->
<!--     daysOfWeekDisabled: [0, 6]-->
<!--   }-->
<!-- });-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='disabledDowLog' role='tabpanel'-->
<!--             aria-labelledby='disabledDowLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='disabledDowInput' class='form-label'>Closed Weekends</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='disabledDow'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='disabledDowInput'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#disabledDow'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#disabledDow'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      new tempusDominus.TempusDominus(document.getElementById('disabledDow'), {-->
<!--        restrictions: {-->
<!--          daysOfWeekDisabled: [0, 6]-->
<!--        }-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='inline'>Inline <a class='anchor-link ' aria-label='Anchor' href='#inline'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      You can also use the picker inline-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='inlineHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#inlineHtml' type='button'-->
<!--                  role='tab' aria-controls='inlineHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='inlineJs-tab' data-bs-toggle='tab' data-bs-target='#inlineJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='inlineJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='inlineLog-tab' data-bs-toggle='tab' data-bs-target='#inlineLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='inlineLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='inlineHtml' role='tabpanel'-->
<!--             aria-labelledby='inlineHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--   class='log-event'-->
<!--   id='inlinePicker'-->
<!-- &gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='inlineJs' role='tabpanel' aria-labelledby='inlineJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('inlinePicker'), {-->
<!--   display: {-->
<!--     inline: true-->
<!--   }-->
<!-- });-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='inlineLog' role='tabpanel'-->
<!--             aria-labelledby='inlineLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='inlinePicker' class='form-label'>Inline</label>-->
<!--          <div-->
<!--            class='log-event'-->
<!--            id='inlinePicker'-->
<!--          >-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      new tempusDominus.TempusDominus(document.getElementById('inlinePicker'), {-->
<!--        display: {-->
<!--          inline: true-->
<!--        }-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='theme'>Theme <a class='anchor-link ' aria-label='Anchor' href='#theme'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      You can also specify the theme for the picker.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='themeHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#themeHtml' type='button'-->
<!--                  role='tab' aria-controls='themeHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='themeJs-tab' data-bs-toggle='tab' data-bs-target='#themeJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='themeJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='themeLog-tab' data-bs-toggle='tab' data-bs-target='#themeLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='themeLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='themeHtml' role='tabpanel'-->
<!--             aria-labelledby='themeHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--    class='input-group'-->
<!--    id='themePicker'-->
<!--    data-td-target-input='nearest'-->
<!--    data-td-target-toggle='nearest'-->
<!--&gt;-->
<!--&lt;input-->
<!--    id='themePickerInput'-->
<!--    type='text'-->
<!--    class='form-control'-->
<!--    data-td-target='#themePicker'-->
<!--/&gt;-->
<!--&lt;span-->
<!--    class='input-group-text'-->
<!--    data-td-target='#themePicker'-->
<!--    data-td-toggle='datetimepicker'-->
<!--&gt;-->
<!--    &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--&lt;/span&gt;-->
<!--&lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='themeJs' role='tabpanel' aria-labelledby='themeJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('themePicker'), {-->
<!--   display: {-->
<!--     theme: 'dark'-->
<!--   }-->
<!-- });-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='themeLog' role='tabpanel'-->
<!--             aria-labelledby='themeLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='themePicker' class='form-label'>Theme</label>-->
<!--          <div-->
<!--            class='input-group'-->
<!--            id='themePicker'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='themePickerInput'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#themePicker'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#themePicker'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--                        <span class='fa-solid fa-calendar'></span>-->
<!--                    </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class='row mt-3'>-->
<!--        <div class='col-sm-6'>-->
<!--          <button id='setThemeLight' class='btn btn-primary'>Set to Light</button>-->
<!--          <button id='setThemeDark' class='btn btn-primary'>Set to Dark</button>-->
<!--          <button id='setThemeAuto' class='btn btn-primary'>Set to Auto</button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      const themePicker = new tempusDominus.TempusDominus(document.getElementById('themePicker'), {-->
<!--        display: {-->
<!--          theme: 'dark'-->
<!--        }-->
<!--      });-->

<!--      const updateTheme = theme => themePicker.updateOptions({ display: { theme } });-->

<!--      const setThemeLightButton = document.getElementById('setThemeLight');-->
<!--      const setThemeDarkButton = document.getElementById('setThemeDark');-->
<!--      const setThemeAutoButton = document.getElementById('setThemeAuto');-->

<!--      setThemeLightButton.addEventListener('click', () => updateTheme('light'));-->
<!--      setThemeDarkButton.addEventListener('click', () => updateTheme('dark'));-->
<!--      setThemeAutoButton.addEventListener('click', () => updateTheme('auto'));-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='multidate'>Multiple Dates <a class='anchor-link ' aria-label='Anchor' href='#multidate'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      The picker allows for multiple dates to be selected.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='multipleDateHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#multipleDateHtml' type='button'-->
<!--                  role='tab' aria-controls='multipleDateHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='multipleDateJs-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#multipleDateJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='multipleDateJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='multipleDateLog-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#multipleDateLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='multipleDateLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='multipleDateHtml' role='tabpanel'-->
<!--             aria-labelledby='multipleDateHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='multipleDate'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='multipleDateInput'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#multipleDate'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#multipleDate'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='multipleDateJs' role='tabpanel' aria-labelledby='multipleDateJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('multipleDatePicker'), {-->
<!--   multipleDates: true-->
<!-- });-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='multipleDateLog' role='tabpanel'-->
<!--             aria-labelledby='multipleDateLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='multipleDateInput' class='form-label'>Multiple dates</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='multipleDatePicker'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='multipleDateInput'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#multipleDatePicker'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#multipleDatePicker'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      new tempusDominus.TempusDominus(document.getElementById('multipleDatePicker'), {-->
<!--        display: {-->
<!--          components: {-->
<!--            clock: false-->
<!--          }-->
<!--        },-->
<!--        multipleDates: true-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='setting-options'>Update options <a class='anchor-link ' aria-label='Anchor' href='#setting-options'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      You can provide a new set of options by calling <code>updateOptions([newOptions])</code>. This function also-->
<!--      allows you to reset the options back to the default or merge the new options with the default instead of the-->
<!--      existing options by passing <code>true</code> as the section parameter.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='settingOptionsHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#settingOptionsHtml' type='button'-->
<!--                  role='tab' aria-controls='settingOptionsHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='settingOptionsJs-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#settingOptionsJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='settingOptionsJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='settingOptionsLog-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#settingOptionsLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='settingOptionsLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='settingOptionsHtml' role='tabpanel'-->
<!--             aria-labelledby='settingOptionsHtml-tab'>-->
<!--        <pre>-->
<!--          <code class='language-html'>-->
<!--&lt;div-->
<!--    class='input-group'-->
<!--    id='settingOptions'-->
<!--    data-td-target-input='nearest'-->
<!--    data-td-target-toggle='nearest'-->
<!--&gt;-->
<!--  &lt;input-->
<!--    id='settingOptionsInput'-->
<!--    type='text'-->
<!--    class='form-control'-->
<!--    data-td-target='#settingOptions'-->
<!--  /&gt;-->
<!--  &lt;span-->
<!--    class='input-group-text'-->
<!--    data-td-target='#settingOptions'-->
<!--    data-td-toggle='datetimepicker'-->
<!--  &gt;-->
<!--    &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--  &lt;/span&gt;-->
<!--&lt;/div&gt;-->
<!--          </code>-->
<!--        </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='settingOptionsJs' role='tabpanel' aria-labelledby='settingOptionsJs-tab'>-->
<!--        <pre>-->
<!--          <code class='language-javascript'>-->
<!--const changeOptionsButton = document.getElementById('changeOptions');-->
<!--const settingOptionsPicker = new tempusDominus.TempusDominus(document.getElementById('settingOptions'));-->

<!--let on = false-->
<!--changeOptionsButton.addEventListener('click', () => {-->
<!--  settingOptionsPicker.updateOptions({-->
<!--    restrictions: {-->
<!--      daysOfWeekDisabled: on ? [] : [0, 6]-->
<!--    }-->
<!--  });-->
<!--  on = !on;-->
<!--  changeOptionsButton.classList.toggle('btn-primary');-->
<!--  changeOptionsButton.classList.toggle('btn-secondary');-->
<!--});-->
<!--          </code>-->
<!--        </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='settingOptionsLog' role='tabpanel'-->
<!--             aria-labelledby='settingOptionsLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='settingOptionsInput' class='form-label'>Update options</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='settingOptions'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='settingOptionsInput'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#settingOptions'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#settingOptions'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--              <span class='fa-solid fa-calendar'></span>-->
<!--            </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class='row mt-3'>-->
<!--        <div class='col-sm-6'>-->
<!--          <button id='changeOptions' class='btn btn-primary'>Toggle disabled weekends</button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      const changeOptionsButton = document.getElementById('changeOptions');-->
<!--      const settingOptionsPicker = new tempusDominus.TempusDominus(document.getElementById('settingOptions'));-->

<!--      let on = false;-->
<!--      changeOptionsButton.addEventListener('click', () => {-->
<!--        settingOptionsPicker.updateOptions({-->
<!--          restrictions: {-->
<!--            daysOfWeekDisabled: on ? [] : [0, 6]-->
<!--          }-->
<!--        });-->
<!--        on = !on;-->
<!--        changeOptionsButton.classList.toggle('btn-primary');-->
<!--        changeOptionsButton.classList.toggle('btn-secondary');-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <div class='row'>-->
<!--    <h3 id='container-option'>Example with container parameter<a class='anchor-link ' aria-label='Anchor'-->
<!--                                                                 href='#container-option'><i-->
<!--      class='fa-solid fa-anchor' aria-hidden='true'></i></a> <small class='show-code' title='View Code'><i-->
<!--      class='fa-solid fa-code' aria-hidden='true'></i></small></h3>-->

<!--    <p>-->
<!--      All you need is an element to attach the picker to and a parent container.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='container-optionHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#container-optionHtml' type='button'-->
<!--                  role='tab' aria-controls='container-optionHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='container-optionJs-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#container-optionJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='container-optionJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='container-optionLog-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#container-optionLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='container-optionLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='container-optionHtml' role='tabpanel'-->
<!--             aria-labelledby='container-optionHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!--&lt;div id='parent-container' class='relative p-5' style='overflow: auto; height: 100px; width: 100%;'&gt;-->
<!--  &lt;div class='input-group log-event' id='containerDatePicker' data-td-target-input='nearest'-->
<!--    data-td-target-toggle='nearest'&gt;-->
<!--    &lt;input id='containerDatePickerInput' type='text' class='form-control' /&gt;-->
<!--    &lt;span class='input-group-text' data-td-target='#settingOptions' data-td-toggle='datetimepicker'&gt;-->
<!--      &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--  &lt;/div&gt;-->
<!--&lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='container-optionJs' role='tabpanel'-->
<!--             aria-labelledby='container-optionJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!--new tempusDominus.TempusDominus(document.getElementById('containerDatePicker'), {-->
<!--  container: document.querySelector('div#parent-container'),-->
<!--});-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='container-optionLog' role='tabpanel'-->
<!--             aria-labelledby='datetimepicker1Log-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <div id='parent-container' class='relative p-5' style='overflow: auto; height: 100px; width: 100%;'>-->
<!--            <label for='containerDatePickerInput'></label>-->
<!--            <div class='input-group log-event' id='containerDatePicker' data-td-target-input='nearest'-->
<!--                 data-td-target-toggle='nearest'>-->
<!--              <input id='containerDatePickerInput' type='text' class='form-control' />-->
<!--              <span class='input-group-text' data-td-target='#settingOptions'-->
<!--                    data-td-toggle='datetimepicker'>-->
<!--                <span class='fa-solid fa-calendar'></span>-->
<!--              </span>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      new tempusDominus.TempusDominus(document.getElementById('containerDatePicker'), {-->
<!--        container: document.querySelector('div#parent-container')-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <section id='plugins-example'>-->
<!--    <h3>Plugins-->
<!--      <a class='anchor-link ' aria-label='Anchor' href='#plugins-example'>-->
<!--        <i class='fa-solid fa-anchor' aria-hidden='true'></i></a>-->
<!--      <small class='show-code' title='View Code'><i class='fa-solid fa-code' aria-hidden='true'></i></small>-->
<!--    </h3>-->

<!--    <p>-->
<!--      Plugins allow you to extend the picker by adding new functionality to either Tempus Dominus globally,-->
<!--      the plugin or by overwriting existing functionality. Check the events tab to see the logs.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='pluginsHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#pluginsHtml' type='button'-->
<!--                  role='tab' aria-controls='pluginsHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='pluginsJs-tab' data-bs-toggle='tab' data-bs-target='#pluginsJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='pluginsJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='pluginsLog-tab' data-bs-toggle='tab' data-bs-target='#pluginsLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='pluginsLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='pluginsHtml' role='tabpanel'-->
<!--             aria-labelledby='pluginsHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='plugins'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='pluginsInput'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#plugins'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#plugins'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='pluginsJs' role='tabpanel' aria-labelledby='pluginsJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!--/*-->
<!--* the bulk of this code isn't really needed. The main requirement is loading the plugin, and calling extend-->
<!--* &lt;script src=&quot;/path/to/plugin.js&quot;&gt;&lt;/script&gt;-->
<!--* tempusDominus.extend(window.tempusDominus_plugin_PLUGINNAME);-->
<!--*/-->
<!--const loadPluginButton = document.getElementById(&#39;loadPlugin&#39;);-->
<!--const plugins = new tempusDominus.TempusDominus(document.getElementById(&#39;plugins&#39;));-->

<!--const doLog = (value)=&gt;-->
<!--{-->
<!--	logger(document.getElementById(&#39;plugins-example&#39;).getElementsByClassName(&#39;logger&#39;)[0],-->
<!--	  &#39;log&#39;,-->
<!--	  `from plugin:`, value);-->
<!--};-->

<!--loadPluginButton.addEventListener(&#39;click&#39;, () =&gt; {-->
<!--	const script = document.createElement(&#39;script&#39;);-->
<!--	script.onload = function () {-->
<!--	  tempusDominus.extend(window.tempusDominus_plugin_example);-->
<!--	  tempusDominus.example(&#39;hi&#39;, doLog);-->
<!--	  plugins.someFunction(&#39;world&#39;, doLog);-->
<!--	  plugins.show(&#39;hello world&#39;, doLog);-->
<!--	};-->
<!--	script.src = &#39;/6/js/plugins/example.js&#39;;-->

<!--	document.body.appendChild(script);-->
<!--});-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='pluginsLog' role='tabpanel'-->
<!--             aria-labelledby='pluginsLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='pluginsInput' class='form-label'>Plugin</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='plugins'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='pluginsInput'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#plugins'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#plugins'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--               <span class='fa-solid fa-calendar'></span>-->
<!--             </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class='row mt-3'>-->
<!--        <div class='col-sm-6'>-->
<!--          <button id='loadPlugin' class='btn btn-primary'>Load Plugin</button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <script type='text/javascript'>-->
<!--      const loadPluginButton = document.getElementById('loadPlugin');-->
<!--      const plugins = new tempusDominus.TempusDominus(document.getElementById('plugins'));-->

<!--      const doLog = (value) => {-->
<!--        logger(document.getElementById('plugins-example').getElementsByClassName('logger')[0],-->
<!--          'log',-->
<!--          `from plugin:`, value);-->
<!--      };-->

<!--      loadPluginButton.addEventListener('click', () => {-->
<!--        const script = document.createElement('script');-->
<!--        script.onload = function() {-->
<!--          tempusDominus.extend(window.tempusDominus.plugins.sample);-->
<!--          tempusDominus.example('hi', doLog);-->
<!--          plugins.someFunction('world', doLog);-->
<!--          plugins.show('hello world', doLog);-->
<!--          loadPluginButton.disabled = true;-->
<!--        };-->
<!--        script.src = '/6/js/plugins/examples/sample.js';-->

<!--        document.body.appendChild(script);-->
<!--      });-->
<!--    </script>-->
<!--  </div>-->

<!--  <section id='picker-functions'>-->
<!--    <h3>Picker Functions-->
<!--      <a class='anchor-link ' aria-label='Anchor' href='#picker-functions'>-->
<!--        <i class='fa-solid fa-anchor' aria-hidden='true'></i></a>-->
<!--      <small class='show-code' title='View Code'><i class='fa-solid fa-code' aria-hidden='true'></i></small>-->
<!--    </h3>-->

<!--    <p>-->
<!--      Click <i class='fa-solid fa-code' aria-hidden='true'></i> to view the code and the log.-->
<!--      Clicking the buttons below will log the results there.-->
<!--    </p>-->

<!--    <div class='code-blocks d-none'>-->
<!--      <ul class='nav nav-tabs' role='tablist'>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link active' id='pickerFunctionsHtml-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#pickerFunctionsHtml' type='button'-->
<!--                  role='tab' aria-controls='pickerFunctionsHtml' aria-selected='true'>HTML-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='pickerFunctionsJs-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#pickerFunctionsJs'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='pickerFunctionsJs' aria-selected='false'>Javascript-->
<!--          </button>-->
<!--        </li>-->
<!--        <li class='nav-item' role='presentation'>-->
<!--          <button class='nav-link' id='pickerFunctionsLog-tab' data-bs-toggle='tab'-->
<!--                  data-bs-target='#pickerFunctionsLog'-->
<!--                  type='button'-->
<!--                  role='tab' aria-controls='pickerFunctionsLog' aria-selected='false'>Events-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class='tab-content'>-->
<!--        <div class='tab-pane fade show active' id='pickerFunctionsHtml' role='tabpanel'-->
<!--             aria-labelledby='pickerFunctionsHtml-tab'>-->
<!--         <pre>-->
<!--           <code class='language-html'>-->
<!-- &lt;div-->
<!--     class='input-group'-->
<!--     id='pickerFunctions'-->
<!--     data-td-target-input='nearest'-->
<!--     data-td-target-toggle='nearest'-->
<!-- &gt;-->
<!--   &lt;input-->
<!--     id='pickerFunctionsInput'-->
<!--     type='text'-->
<!--     class='form-control'-->
<!--     data-td-target='#pickerFunctions'-->
<!--   /&gt;-->
<!--   &lt;span-->
<!--     class='input-group-text'-->
<!--     data-td-target='#pickerFunctions'-->
<!--     data-td-toggle='datetimepicker'-->
<!--   &gt;-->
<!--     &lt;span class='fa-solid fa-calendar'&gt;&lt;/span&gt;-->
<!--   &lt;/span&gt;-->
<!-- &lt;/div&gt;-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade' id='pickerFunctionsJs' role='tabpanel'-->
<!--             aria-labelledby='pickerFunctionsJs-tab'>-->
<!--         <pre>-->
<!--           <code class='language-javascript'>-->
<!-- new tempusDominus.TempusDominus(document.getElementById('pickerFunctions'));-->
<!--           </code>-->
<!--         </pre>-->
<!--        </div>-->
<!--        <div class='tab-pane fade logger' id='pickerFunctionsLog' role='tabpanel'-->
<!--             aria-labelledby='pickerFunctionsLog-tab'>-->
<!--          <div class='alert alert-info'>-->
<!--            Events will display as you manipulate the picker.-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class='container'>-->
<!--      <div class='row'>-->
<!--        <div class='col-sm-6'>-->
<!--          <label for='pickerFunctionsInput' class='form-label'>Functions</label>-->
<!--          <div-->
<!--            class='input-group log-event'-->
<!--            id='pickerFunctions'-->
<!--            data-td-target-input='nearest'-->
<!--            data-td-target-toggle='nearest'-->
<!--          >-->
<!--            <input-->
<!--              id='pickerFunctionsInput'-->
<!--              type='text'-->
<!--              class='form-control'-->
<!--              data-td-target='#pickerFunctions'-->
<!--            />-->
<!--            <span-->
<!--              class='input-group-text'-->
<!--              data-td-target='#pickerFunctions'-->
<!--              data-td-toggle='datetimepicker'-->
<!--            >-->
<!--                            <span class='fa-solid fa-calendar'></span>-->
<!--                        </span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class='row mt-3'>-->
<!--        <div class='col-sm-6'>-->
<!--          <button id='getDate' class='btn btn-primary me-3'>Get Date</button>-->
<!--          <button id='setDate' class='btn btn-primary'>Set Date to 2022-05-10</button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <script type='text/javascript'>-->
<!--      const functionLog = (prefix, value) => {-->
<!--        logger(document.getElementById('picker-functions').getElementsByClassName('logger')[0],-->
<!--          'log',-->
<!--          prefix,-->
<!--          value);-->
<!--      };-->

<!--      const pickerFunctions = new tempusDominus.TempusDominus(document.getElementById('pickerFunctions'), {-->
<!--        multipleDates: true,-->
<!--        display: {-->
<!--          components: {-->
<!--            clock: false-->
<!--          }-->
<!--        }-->
<!--      });-->

<!--      document.getElementById('getDate').addEventListener('click', () => {-->
<!--        //logs all selected dates-->
<!--        functionLog('all selected', JSON.stringify(pickerFunctions.dates.picked, null, 2));-->
<!--        //logs the last selected-->
<!--        functionLog('last selected', pickerFunctions.dates.lastPicked);-->
<!--        //logs the selected index. This will always be 0 if multipleDates is false-->
<!--        functionLog('last selected index', pickerFunctions.dates.lastPickedIndex);-->
<!--      });-->

<!--      document.getElementById('setDate').addEventListener('click', () => {-->
<!--        //parseInput will attempt to turn strings and Date objects to a DateTime object.-->
<!--        const parsedDate = pickerFunctions.dates.parseInput(new Date(2020, 4, 10));-->
<!--        //if multipleDates is false, the second parameter is not required.-->
<!--        pickerFunctions.dates.setValue(parsedDate, pickerFunctions.dates.lastPickedIndex);-->
<!--      });-->

<!--    </script>-->
<!--  </div>-->
<!--  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">-->
</div>

<div id="page-meta">
  <div id="title">Examples</div>
  <div id="post-date">07/08/2021</div>
  <div id="update-date">07/20/2022</div>
  <div id="excerpt">How to use Tempus Dominus datetime picker</div>
  <div id="tags">datepicker, javascript, open source, tempus dominus, eonasdan</div>
</div>
